<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/icons-extra.css" />
	</head>

	<body>
		<div class="mui-content" id="form1">
			<div class="mui-indexed-list-search mui-input-row mui-search">
				<input type="search" id="txtKeyword" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索商品">
			</div>
			<ul class="mui-table-view" style="margin-top: -15px;">
                <li class="mui-table-view-cell" v-for="item of items" >
                    <div class="mui-table mui-navigate-right"  v-on:click="viewGoods(item)">
                        <img class="mui-pull-left mui-col-xs-4" v-bind:src="item.CommodityFileUrl" style="height:117px;width:110px;margin-top:10px" >
                        <div class="mui-media-body mui-col-xs-8" >
                            <div class="mui-ellipsis-2" v-on:click="viewGoods(item)">
                               <label v-html="item.CommodityName"></label>
                            </div>
                            <div class="mui-table mui-content-padded" >
                                <div class="mui-table-cell mui-col-xs-6 mui-text-left">
                                    <h5>规格:<label v-html="item.CommoditySpec"></label></h5>
                                </div>
                                <div class="mui-table-cell mui-col-xs-6 mui-text-left" >
                                    <h5>等级:<label v-html="item.CommodityGrade"></label></h5>
                                </div>
                            </div>
                            <div class="mui-table mui-content-padded" >
                                <div class="mui-table-cell mui-col-xs-6 mui-text-left">
                                    <h5>购进:<label v-html="item.OrderDate.substring(0,10)"></label></h5>
                                </div>
                                <div class="mui-table-cell mui-col-xs-6 mui-text-left" >
                                    <h5>保质期:<label v-html="item.CommodityExpiry"></label>天</h5>
                                </div>
                            </div>
                            <div class="mui-content-padded" style="margin-top:-8px">
                                <button type="button" class="mui-btn mui-btn-link" v-on:click="openEnterprise(item)" style="margin-left:-12px">
                                    <div class=" mui-ellipsis-2 mui-text-left">{{item.EnterpriseName}}</div>
                                </button>
                                <div class="mui-table" style="color:red;font-size:14px;margin-top:-10px">
                                    <div class="mui-table-cell mui-col-xs-8 mui-text-left">
                                        价格：¥ <label v-html="item.UnitPirce"></label>
                                    </div>
                                    <div class="mui-table-cell mui-col-xs-4 mui-text-right" v-on:click="increase(item)">
                                        <span class="mui-icon-extra mui-icon-extra-cart"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/shiquan.js" ></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#form1',
					up: {
						auto:true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var vue = new Vue({
				el:"#form1",
				data:{
					row:10,
					page:1,
					items:[],
					records:0,
					keyword:""
				},
			});
			var myself;
			mui.plusReady(function(){
				myself=plus.webview.currentWebview();
				myself.setPullToRefresh({support:true,
					height:'50px',
					range:'200px',
					contentdown:{
						caption:'下拉可以刷新'
					},
					contentover:{
						caption:'释放立即刷新'
					},
					contentrefresh:{
						caption:'正在刷新...'
					}
				},pulldownRefresh);
				
				var txtKeyword = document.getElementById("txtKeyword");
				txtKeyword.addEventListener("keypress",function(event){
					document.activeElement.blur();//收起虚拟键盘
					vue.page = 1;
					vue.keyword = txtKeyword.value;
					loaddata();//TODO 完成搜索事件
			
			        event.preventDefault(); // 阻止默认事件---阻止页面刷新
				});
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				vue.page = 1;
				loaddata();
			}
			function pullupRefresh(){
				loaddata();
			}
			// 刷新页面
			function loaddata(){
				setTimeout(function(){
					console.log("loadData");
					var queryJson={
                        EnterpriseId:"",
                        condition:"CommodityName",
                        keyword:vue.keyword,
                   };
                    var ajaxUrl = shiquan.serverUrl + "/api/StockImport/GetPageList?rows="+vue.row+"&page="+vue.page+"&queryJson="+JSON.stringify(queryJson);
                    console.log(ajaxUrl);
                    plus.nativeUI.showWaiting("加载数据，请稍候...");
                    mui.ajax(ajaxUrl, {
                        data: {},
                        dataType: 'json', //数据格式类型
                        type: 'GET', //http请求类型
                        timeout: 60000, //超时设置
                        success: function (result) {
                        	myself.endPullToRefresh();
                        	plus.nativeUI.closeWaiting();
                            console.log(JSON.stringify(result))
                            var appendData = JSON.parse(result.AppendData);
                            var rows = appendData.rows;
                            if(vue.page==1){
                                vue.records = appendData.records;
                                vue.items = rows;
                            }
                            else{
                                mui.each(rows,function(index,data){
                                    vue.items.push(data);
                                })
                            }
                            vue.page = vue.page + 1;
                            mui('#form1').pullRefresh().endPullup((vue.items >= vue.records)); 
                        },
                        error: function (result) {
                        	plus.nativeUI.closeWaiting();
                            myself.endPullToRefresh();
                            plus.nativeUI.alert("加载数据失败："+JSON.stringify(result));
                        }
                    });
					
				},1000);
			}
		</script>
	</body>

</html>